<template lang="pug">
  Scroll.order-list(:data="getOrderData")
    div
      .row.clearfix(v-if="getOrderData", v-for="(order, index) in getOrderData", :key="index")
        .item-body(v-if='order.orderitems', v-for="(item, idx) in order.orderitems", :key="idx")
          .img-box
            img(:src="item.thumburl")
          .info
            h3.title {{item.productname}}
            p.date-time {{item.addtime | formatTime}}
            p 姓名：{{order.name}} {{order.mobile}}
            p 地址：{{order.province+order.city+order.address}}
            p(v-if="order.status == 1") 状态：
              span.red {{order.status_text}}
            p(v-if="order.status == 2") 状态：
              span.red {{order.status_text}}
            p(v-if="order.status == 3") 状态：
              span.red 已发货 快递：{{ order.expressname+order.expressno }}
            p(v-if="order.status == 4") 状态：
              span.red {{order.status_text}}
          .number.pos-r.tar
            .count ×{{item.num}}
            .price ￥{{item.price}}
        .item-foot.tar(v-if="order.status == 4")
          span.btn.btn-radius(@click="handleRate(order)") 评论

      div.no-order(v-else)
        p 暂无订单
</template>

<script>
import Scroll from '@/components/Scroll'
export default {
  props: {
    data: {
      type: [Object, Array],
      default: []
    }
  },
  computed: {
    getOrderData() {
      if(this.data) {
        return this.data
      }
    }
  },
  methods: {
    handleRate(order) {
      this.$emit('handleRate', order)
    }
  },
  filters: {
    formatTime(ns) {
      if(!ns) return
      var arr = ns.split('T')

      return `${arr[0]} ${arr[1].substr(0, 8)}`
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
// @import '../../assets/styles/color.styl'
.order-center
  .user-top
    .user-profile
      .user-avatar
        border: 1px solid #eae5e5
        border-radius: 50%
  .order-list
    background: #fff
    .row
      margin-bottom: 10px
      padding: 10px
      &:not(:last-child)
        box-shadow: 0 2px 3px #f6f6f6
      .item-body
        .info
          .title
            font-size: 16px
            font-weight: 600px
            color: $black
          p
            color: $silver-dark
          .date-time
            color: #a9a9a9
            margin-bottom: 10px
        .number
          padding-top: 20px

      .item-foot
        .btn
          display: inline-block
          height: 20px
          line-height: 20px
          padding: 2px 15px
          font-size: 12px
          color: $silver
          text-align: center
          cursor: pointer
        .btn-radius
          border: 1px solid #ddd
          border-radius: 25px
</style>
